<!DOCTYPE html>
<html lang="ch-ZN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>翻转卡片</title>
    <link rel="stylesheet" href="练习旋转卡片.css">
</head>

<body>
    <div class="picture">
        <div class="pic-item pic-item-down" data-id="0">
            <h1 class="des-nick" data-id="0">真珠之智</h1>
            <img src="./image/轮播图-心海.jpg" alt="" data-id="0" />
            <h1 class="des-name" data-id="0">珊瑚宫心海</h1>
            <button class="more" data-id="0">了解更多</button>
        </div>
        <div class="pic-item pic-item-up" data-id="1">
            <h1 class="des-nick" data-id="1">机逐封密</h1>
            <img src="./image/轮播图-珐露珊.jpg" alt="" data-id="1" />
            <h1 class="des-name" data-id="1">珐露珊</h1>
            <button class="more" data-id="1">了解更多</button>
        </div>
        <div class="pic-item pic-item-down" data-id="2">
            <h1 class="des-nick" data-id="2">白鹭霜华</h1>
            <img src="./image/轮播图-神里绫华.jpg" alt="" data-id="2" />
            <h1 class="des-name" data-id="2">神里绫华</h1>
            <button class="more" data-id="2">了解更多</button>
        </div>
        <div class="pic-item pic-item-up" data-id="3">
            <h1 class="des-nick" data-id="3">小吉祥草王</h1>
            <img src="./image/轮播图-纳西妲.jpg" alt="" data-id="3" />
            <h1 class="des-name" data-id="3">纳西妲</h1>
            <button class="more" data-id="3">了解更多</button>
        </div>
        <div class="pic-item pic-item-down" data-id="4">
            <h1 class="des-nick" data-id="4">雪霁梅香</h1>
            <img src="./image/轮播图-胡桃.jpg" alt="" data-id="4" />
            <h1 class="des-name" data-id="4">胡桃</h1>
            <button class="more" data-id="4">了解更多</button>
        </div>
    </div>
    <div class="tab">
        <div class="choose tab-xinhai" data-id="0">
            <button class="close" data-id="0">X</button>
            <div class="tab-xinhai-name">心海</div>
            <div class="tab-xinhai-des">海祇岛的“现人神巫女”，意为以凡人之躯承载神的意志、代替神明守护这片土地之人，即——海祇岛最高领袖。</div>
        </div>
        <div class="choose tab-falushan">
            <button class="close" data-id="1">X</button>
            <div class="tab-falushan-name">珐露珊</div>
            <div class="tab-falushan-des">
                在刹诃伐罗学院的学生中，流传着这么一个传说：要是有哪门机关术考试未能及格，又不敢去找正在气头上的导师补课，可以移步隔壁室罗婆耽学院，请珐露珊前辈指点一二。无需费心备礼，只要带上足够的诚意与谦卑的态度，恭称一声“前辈”，就能请动传说中的机关活字典。
            </div>
        </div>
        <div class="choose tab-shenli">
            <button class="close" data-id="2">X</button>
            <div class="tab-shenli-name">神里绫华</div>
            <div class="tab-shenli-des">
                放眼稻妻领土，未上至雷电将军视听的事务大多由“评定所”处理。“评定所”的议事权分属三家，人称三奉行，即“社奉行”、“天领奉行”与
                “勘定奉行”。拥有此三项奉行权利的家族，其姓氏为：神里、九条与柊，乃是稻妻无人不知无人不晓的御三家。而神里绫华，正是社奉行神里家的大小姐，远近闻名的“白鹭公主”。
            </div>
        </div>
        <div class="choose tab-naxida">
            <button class="close" data-id="3">X</button>
            <div class="tab-naxida-name">纳西妲</div>
            <div class="tab-naxida-des">
                许久前草神创造了须弥雨林，又通过教令院将智慧赐予国民。她的美名无处不在，千万个故事，只为传唱她的事迹与美德而问世。在人民眼中，草神的存在更像是一种符号化的象征——因此，他们才能确信神明的庇护自古就存在于这片土地之上。城中至贤对草神崇拜备至，民众也坚定不移地追随其后。而影响诸多的“虚空”系统，则是”小吉祥草王”的耳与目。
            </div>
        </div>
        <div class="choose tab-hutao">
            <button class="close" data-id="4">X</button>
            <div class="tab-hutao-name">胡桃</div>
            <div class="tab-hutao-des">
                往生堂第七十七代堂主，掌管堂中事务的少女。身居堂主之位，却没有半分架子。她的鬼点子，比瑶光滩上的海砂都多。她的脑袋里装着无数奇思妙想，叫旁人惊讶不已。平日里，胡桃俨然是个贪玩孩子，一有闲功夫便四处乱逛，被邻里看作甩手掌柜。唯有葬礼上亲自带领仪倌队伍走过繁灯落尽的街道时，她才会表现出凝重、肃穆的一面。
            </div>
        </div>
    </div>

    <script>

        (() => {
            "use strict"; // 使用严格模式

            const picture = document.querySelector(".picture")
            const img = document.querySelectorAll("img")
            const desNick = document.querySelectorAll(".des-nick")
            const desName = document.querySelectorAll(".des-name")
            const picItemDown = document.querySelectorAll(".pic-item-down")
            const picItemUp = document.querySelectorAll(".pic-item-up")
            const more = document.querySelectorAll('.more')

            // 添加一个事件监听器，当页面加载完成后执行回调函数
            window.addEventListener("load", function () {
                setTimeout(() => {
                    picItemDown.forEach((item) => (item.classList.add('pic-item-active')))
                    picItemUp.forEach((item) => {
                        item.style.marginTop = 0
                        item.style.opacity = 1
                    })
                }, 1000)
                setTimeout(() => {
                    img.forEach((item) =>
                        item.classList.add('pic-active')
                    )
                }, 2000)
            })

            // let i = 4;
            // let flag = true
            // let timeId = setInterval(() => {
            //     if (flag) {
            //         i++
            //         if (i > 4) {
            //             // return flag = false
            //             i = 0
            //         }

            //         render()
            //     }
            // }, 3000)

            // 封装渲染函数
            function render() {
                // 遍历所有图片和文字，移除激活状态的类名
                img.forEach(item => item.classList.remove("img-active"))
                desNick.forEach(item => item.classList.remove("des-active"))
                desName.forEach(item => item.classList.remove("des-active"))

                // 切换当前图片和文字的类名
                img[i].classList.toggle("img-active")
                setTimeout(() => {
                    desNick[i].classList.toggle("des-active")
                    desName[i].classList.toggle("des-active")

                }, 500)
            }


            //当鼠标移出picture的范围内图片就斜过来
            picture.addEventListener('mouseleave', () => {
                img.forEach((img) => img.classList.remove('pic-active'))
                img.forEach((img) => img.classList.remove('img-active'))
                more.forEach((item) => item.classList.remove('more-active'))
                desNick.forEach((item) => item.classList.remove('des-active'))
                desName.forEach((item) => item.classList.remove('des-active'))

            })

            //当鼠标进入picture时卡片旋转
            picture.addEventListener('mouseenter', () => {
                img.forEach((img) => img.classList.add('pic-active'))
            })

            let i = 0
            picture.addEventListener("click", (e) => {
                if (e.target.tagName === "IMG") {
                    img.forEach((img, index) => {
                        if (img === e.target) {
                            e.target.classList.add("img-active")
                            setTimeout(() => {
                                desNick[index].classList.add("des-active")
                                desName[index].classList.add("des-active")
                                more[index].style.display = 'block'
                                setTimeout(() => more[index].classList.add('more-active'), 300)
                            }, 500);
                            i = index
                        } else {
                            img.classList.remove("img-active")
                            desNick[index].classList.remove("des-active")
                            desName[index].classList.remove("des-active")
                            more[index].classList.remove('more-active')
                        }
                    })
                }
            });

            //如果点击除图片其他位置，图片恢复原样
            window.addEventListener('click', (e) => {
                if (e.target.tagName !== 'IMG') {
                    img.forEach((img) => img.classList.remove('img-active'))
                    more.forEach((item) => item.classList.remove('more-active'))
                    desNick.forEach((item) => item.classList.remove('des-active'))
                    desName.forEach((item) => item.classList.remove('des-active'))
                }
            })

            // picture.addEventListener('click', () => {
            //     clearInterval(timeId)
            // })


            // picture.addEventListener('mouseleave', () => {
            //     clearInterval(timeId)
            //     timeId = setInterval(() => {
            //         if (flag) {
            //             i++
            //             if (i > 4) {
            //                 i = 0
            //             }

            //             render()
            //         }
            //     }, 3000)
            // })

            //点击了解更多出现角色介绍，角色卡片向左右散开
            const choose = document.querySelectorAll('.choose')
            const picItem = document.querySelectorAll('.pic-item')
            picture.addEventListener('click', (e) => {
                if (e.target.tagName === 'BUTTON') {
                    choose[e.target.dataset.id].style.display = 'block'
                    setTimeout(() => {
                        choose[e.target.dataset.id].classList.add('tab-active')
                    }, 300)

                    picItem.forEach((item) => {
                        if (item.dataset.id < e.target.dataset.id) {
                            item.classList.add('pic-active2')
                            setTimeout(() => {
                                item.style.display = 'none'
                            }, 500)
                        }
                        else {
                            item.classList.add('pic-active3')
                            setTimeout(() => {
                                item.style.display = 'none'
                            }, 500)
                        }
                    })
                }
            })

            // 点击关闭按钮关闭介绍框
            const close = document.querySelectorAll('.close')
            const tab = document.querySelector('.tab')
            tab.addEventListener('click', (e) => {
                if (e.target.tagName === 'BUTTON') {
                    choose[e.target.dataset.id].classList.remove('tab-active')
                    setTimeout(() => {
                        choose[e.target.dataset.id].style.display = 'none'
                    }, 300)

                    picItem.forEach((item) => {
                        item.style.display = 'block'
                        setTimeout(() => {
                            item.classList.remove('pic-active2')
                            item.classList.remove('pic-active3')
                        }, 300)
                    })
                }
            })
        })();

    </script>
</body>

</html>